﻿@{
    Layout = null;
}

<link href="~/libs/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
<script src="~/libs/layui-v2.5.6/layui/layui.js"></script>
<div style="padding:20px;">
    <button class="layui-btn" id="btnAdd">新增</button>
    <table class="layui-hide" id="jobGradeTable" lay-filter="jobGradeTable"></table>
</div>

<!-- 新增弹窗表单内容，直接用div隐藏 -->
<div id="addFormDiv" style="display:none;">
    <form class="layui-form" lay-filter="addForm" style="padding:20px;">
        <div class="layui-form-item">
            <label class="layui-form-label">职级编码</label>
            <div class="layui-input-block">
                <input type="text" name="jobGradeCoding" required lay-verify="required" placeholder="请输入职级编码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">职级层次</label>
            <div class="layui-input-block">
                <input type="text" name="jobGradeLevel" required lay-verify="required" placeholder="请输入职级层次" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">职级层次名称</label>
            <div class="layui-input-block">
                <input type="text" name="jobGradeLevelName" required lay-verify="required" placeholder="请输入职级层次名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">薪资范围下限</label>
            <div class="layui-input-block">
                <input type="text" name="salaryRangelower" required lay-verify="required" placeholder="请输入薪资范围下限" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">薪资范围上限</label>
            <div class="layui-input-block">
                <input type="text" name="salaryRangelimits" required lay-verify="required" placeholder="请输入薪资范围上限" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <input type="text" name="referenceColumn" placeholder="请输入备注" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="submitAdd">确定</button>
                <button type="button" class="layui-btn layui-btn-primary" id="cancelAdd">取消</button>
            </div>
        </div>
    </form>
</div>

<!-- 操作列模板 -->
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
$(function(){
    layui.use(['table', 'form', 'layer'], function () {
        var table = layui.table, form = layui.form, layer = layui.layer;

        table.render({
            elem: '#jobGradeTable',
            url: '/PositionManagement/GetJobGradeTableData',
            method: 'get',
            page: true,
            cols: [[
                { type: 'checkbox' },
                { field: 'jobGradeCoding', title: '职级编码' },
                { field: 'jobGradeLevel', title: '职级层次' },
                { field: 'jobGradeLevelName', title: '职级层次名称' },
                { field: 'salaryRangelower', title: '薪资范围下限' },
                { field: 'salaryRangelimits', title: '薪资范围上限' },
                { field: 'referenceColumn', title: '备注' },
                { title: '操作', toolbar: '#barDemo' }
            ]]
        });

        // 新增按钮
        $('#btnAdd').off('click').on('click', function () {
            form.val('addForm', {
                "jobGradeCoding": "",
                "jobGradeLevel": "",
                "jobGradeLevelName": "",
                "salaryRangelower": "",
                "salaryRangelimits": "",
                "referenceColumn": ""
            });
            layer.open({
                type: 1,
                title: '添加职级管理',
                area: ['600px', '500px'],
                content: $('#addFormDiv'),
                end: function () {
                    $('#addFormDiv').hide();
                }
            });
        });

        // 取消按钮
        $('#cancelAdd').off('click').on('click', function () {
            layer.closeAll();
        });

        // 提交表单
      form.on('submit(submitAdd)', function (data) {
    console.log(data.field); // 先打印看下
    $.ajax({
        url: '/PositionManagement/AddJobGradeManagementModel',
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(data.field),
        success: function (res) {
            console.log(res);   
            if (res.success) {
                layer.msg('添加成功');
                layer.closeAll();
                table.reload('jobGradeTable');
            } else {
                layer.msg(res.msg || '添加失败');
            }
        }
    });
    return false;
});
    });
});
</script>